import React, {Component, PureComponent} from 'react';
import {Form} from '@icedesign/base';
import {isEqual, compose, map, filter, pick} from 'lodash/fp';

export const createFormalistItem = ({field, formItemLayout: defaultFormItemLayout}) => class FormalistItem extends Component {
    render() {
        const {
            required,
            initValue,
            valueName = 'value',
            name,
            label,
            item: ItemComp,
            formItemLayout,
            extraContent,
            type,
            ruleMax,
            rules = [],
            ...rest
        } = this.props;
        const _formItemLayout = formItemLayout || defaultFormItemLayout;
        const requiredProp = required ? {required: true, message: `${label} 不能为空`} : {};
        const typeProp = type ? {type} : {};
        const maxProp = ruleMax ? [{max: ruleMax, message: `${label}最多${ruleMax}位`}] : []
        return <Form.Item label={label && (<span>{label} :</span>)} required={required} {..._formItemLayout}>
            {ItemComp && <ItemComp {...field.init(name, {
                initValue,
                valueName,
                rules: [{...requiredProp, ...typeProp}, ...maxProp, ...rules]
            })} {...rest} />}
            {extraContent}
        </Form.Item>
    }
}

export default class Formalist extends Component {
    componentDidMount() {
        this._setValues()
    }

    componentDidUpdate(prevProps) {
        if (!isEqual(prevProps.value, this.props.value)) {
            this._setValues()
        }
    }

    _setValues = () => {
        const {field, dataSource} = this.props
        const newValues = pick(
            compose(
                map('name'),
                filter('name')
            )(dataSource)
        )(this.props.value)
        field.setValues(newValues)
    }

    render() {
        const {value, formItemLayout, field, dataSource} = this.props;
        const init = field.init;
        // console.log( 'Formalist render ', value );
        // console.log(dataSource)
        return <Form field={field}>
            {
                dataSource && dataSource.map(
                    (
                        {
                            required, type, ruleMax, label, dataList, initValue: defaultValue, item, name, rules = [], hidden = false
                        },
                        idx
                    ) => {
                        {/* console.log('dataList', dataList) */}
                        {/* const initValue = ((value && value[name]) ? value[name] : defaultValue) ||
                            (dataList ? dataList[0].value : null); */}
                        const initValue = (value && value[name]) ? value[name] : defaultValue
                        const dataSourceProp = dataList ? {dataSource: dataList} : {};
                        console.log('dataList', dataList)
                        const initValueProp = initValue ? {initValue} : {};
                        const requiredProp = required ? {required: true, message: `${label}不能为空`} : {};
                        const typeProp = type ? {type} : {};
                        const maxProp = ruleMax ? [{max: ruleMax, message: `${label}最多${ruleMax}位`}] : []
                        if (hidden) init(name, {...initValueProp})
                        if (!item || hidden) return null
                        // console.log('Formalist ', name, initValue, dataList);
                        return <Form.Item key={idx} required={required} label={label} {...formItemLayout}>
                            {
                                React.cloneElement(item, {
                                    ...init(name, {
                                        ...initValueProp,
                                        rules: [{...requiredProp, ...typeProp}, ...maxProp, ...rules]
                                    }),
                                    ...dataSourceProp
                                })
                            }
                        </Form.Item>
                    }
                )
            }
        </Form>
    }
}
